<template>
	<div class="content">
		<el-form label-width="80px">
			<el-form-item label="学历类型">
				<el-select v-model="educationType" placeholder="请选择">
					<el-option
						v-for="(item, index) in educationList"
						:key="index"
						:label="item.educationName"
						:value="item.educationType">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="年级">
				<el-select v-model="gradeType" placeholder="请选择">
					<el-option
						v-for="(item, index) in gradeList"
						:key="index"
						:label="item.gradeName"
						:value="item.gradeType">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="年级类型">
				<el-input 
					v-model="gradeType"
					readonly />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submit">提交</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="success" @click="getList(1)">刷新</el-button>
			</el-form-item>
		</el-form>
		<el-row>
			<paging-table
				:data="data"
				:total="count"
				:cur-page="curPage"
				@getList="getList">
				<el-table-column 
					prop="gradeName"
					label="年级"
					width="180" />
				<el-table-column 
					prop="gradeType"
					label="年级类型"
					width="180" />
				<el-table-column 
					prop="educationType"
					label="学历类型" />
			</paging-table>
		</el-row>
	</div>
</template>
<script>
import PagingTable from '@/components/PagingTable'

const GRADE_LIST = [
	{ educationType: 'primary', gradeType: 'p1', gradeName: '一年级' },
	{ educationType: 'primary', gradeType: 'p2', gradeName: '二年级' },
	{ educationType: 'primary', gradeType: 'p3', gradeName: '三年级' },
	{ educationType: 'primary', gradeType: 'p4', gradeName: '四年级' },
	{ educationType: 'primary', gradeType: 'p5', gradeName: '五年级' },
	{ educationType: 'primary', gradeType: 'p6', gradeName: '六年级' },
	{ educationType: 'middle', gradeType: 'm1', gradeName: '一年级' },
	{ educationType: 'middle', gradeType: 'm2', gradeName: '二年级' },
	{ educationType: 'middle', gradeType: 'm3', gradeName: '三年级' },
	{ educationType: 'high', gradeType: 'h1', gradeName: '一年级' },
	{ educationType: 'high', gradeType: 'h2', gradeName: '二年级' },
	{ educationType: 'high', gradeType: 'h3', gradeName: '三年级' },
	{ educationType: 'college', gradeType: 'c1', gradeName: '一年级' },
	{ educationType: 'college', gradeType: 'c2', gradeName: '二年级' },
	{ educationType: 'college', gradeType: 'c3', gradeName: '三年级' },
	{ educationType: 'college', gradeType: 'c4', gradeName: '四年级' },
	{ educationType: 'college', gradeType: 'c5', gradeName: '五年级' }
]

export default {
	data () {
		return {
			data: [],
			curPage: 1,
			count: 0,
			pagesize: 10,
			gradeName: '',
			gradeType: '',
			educationType: '',
			educationList: [],
			gradeList: []
		}
	},
	watch: {
		educationType () {
			const educationType = this.educationType
			this.gradeType = ''
			if (educationType) {
				this.gradeList = GRADE_LIST.filter(item => item.educationType === educationType)
			} else {
				this.gradeList = []
			}
		},
		gradeType () {
			const gradeType = this.gradeType
			if (gradeType) {
				const target = GRADE_LIST.find(item => item.gradeType === gradeType)
				this.gradeName = target && target.gradeName ? target.gradeName : '' 
			} else {
				this.gradeName = ''
			}
		}
	},
	methods: {
		async getEdcationList () {
			const res = await this.$http.get('/education')
			const data = res.data
			this.educationList = data.slice(0)
		},
		async getList (page) {
			const res = await this.$http.get('/grade', {
				page,
				pagesize: this.pagesize,
			})
			const { data, count } = res
			this.data = data.slice(0)
			this.count = count
			this.curPage = page
		},
		async submit () {
			const educationType = this.educationType
			const gradeType = this.gradeType
			const gradeName = this.gradeName
			if (!educationType) {
				this.$alert('请选择学历', '提示')
				return
			} 
			if (!gradeType) {
				this.$alert('请选择年级', '提示')
				return
			}
			if (!gradeName) {
				this.$alert('请选择年级', '提示')
				return
			}
			const res = await this.$http.post('/grade', {
				educationType,
				gradeType,
				gradeName
			})
			const { code } = res
			if (code === 200) {
				this.getList()
			} else {
				this.$alert('创建失败', '提示')
			}
		}
	},
	created () {
		this.getEdcationList()
		this.getList(1)
	},
	components: {
		PagingTable
	}
}
</script>
